<script lang="jsx" setup>
import dayjs from 'dayjs';
import { computed, nextTick, ref } from 'vue';
import { DeleteOutlined, QrcodeOutlined } from '@ant-design/icons-vue';
import Table from '@/components/common/table.vue';
import CommonSearch from '@/components/common/common-search.vue';
// import { downLoadData } from '@/service/api/modules/material-management/open-sheet-use-record';
import { deleteData } from '@/service/api/modules/trace/dry-film-trace';
import PrintQrCode from '../components/print-qr-code.vue';

const commonSearchRef = ref(null);
const tableRef = ref(null);
const searchParams = ref({
  prodNo: null,
  lotNo: null,
  barcode: null,
  time: null
});

const searchFormList = [
  {
    type: 'input',
    key: 'prodNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5
  },
  {
    type: 'input',
    key: 'lotNo',
    label: 'LOT号',
    placeholder: '请输入LOT号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5
  },
  {
    type: 'input',
    key: 'barcode',
    label: '物料批次',
    placeholder: '请输入物料批次',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '时间',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.beginTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'fullProdNo',
    dataIndex: 'fullProdNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    fixed: 'left',
    width: 130
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: 'Lot号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'barcode',
    dataIndex: 'barcode',
    title: '物料批次',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'matNo',
    dataIndex: 'matNo',
    title: '物料型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 280
  },
  {
    key: 'matName',
    dataIndex: 'matName',
    title: '物料名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'prodDate',
    dataIndex: 'prodDate',
    title: '物料生产时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return record.prodDate && dayjs(record.prodDate).format('YYYY-MM-DD');
    }
  },
  {
    key: 'expiryDate',
    dataIndex: 'expiryDate',
    title: '物料失效时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return record.expiryDate && dayjs(record.expiryDate).format('YYYY-MM-DD');
    }
  },
  {
    key: 'batchNo',
    dataIndex: 'batchNo',
    title: '供应商批次',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'deliveryOrder',
    dataIndex: 'deliveryOrder',
    title: '送货单号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'supplierNo',
    dataIndex: 'supplierNo',
    title: '供应商编码',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'splOrderNo',
    dataIndex: 'splOrderNo',
    title: '采购编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'specifications',
    dataIndex: 'specifications',
    title: '规格',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 210
  },
  {
    key: 'length',
    dataIndex: 'length',
    title: '长',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'width',
    dataIndex: 'width',
    title: '宽',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'modelNum',
    dataIndex: 'modelNum',
    title: '型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },

  {
    key: 'createUser',
    dataIndex: 'createUser',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180,
    customRender: ({ record }) => {
      return record.createTime && dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss');
    }
  }
];

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      prodNo: null,
      lotNo: null,
      matNo: null,
      time: null
    };
    search();
  });
}

// function downloadExcel() {
//   downLoadData({ ...searchData.value });
// }

const visible = ref(false);
function handleQrCode() {
  visible.value = true;
}

const tabaleSelect = ref([]);
function handleTableSelectChange(val) {
  tabaleSelect.value = val;
}

const delLoading = ref(false);
function handelDel() {
  if (tabaleSelect.value.length === 0) {
    window.$message.error('请选择需要删除的记录');
    return;
  }
  delLoading.value = true;
  window.$modal.confirm({
    title: '确定删除所选中的记录吗?',
    onOk: () => {
      deleteData(tabaleSelect.value.map(item => item.id))
        .then(({ data, error }) => {
          if (!error) {
            window.$message.success('删除成功');
            tableRef.value.getData(1);
            tabaleSelect.value = [];
          }
        })
        .finally(() => {
          delLoading.value = false;
        });
    },
    onCancel: () => {}
  });
}
</script>

<template>
  <div class="message jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      :show-row-selection="true"
      row-key="id"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/mes/dryfilm/list"
      :auto-generate-uuid="true"
      @table-select-change="handleTableSelectChange"
    >
      <template #title>
        <AButton
          v-hasAuth="['trace:dry-film-trace:delete']"
          type="primary"
          danger
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelDel()"
        >
          <template #icon>
            <DeleteOutlined class="align-sub" />
          </template>
          删除
        </AButton>
        <!--
 <AButton
          v-hasAuth="['manage:event:add']"
          type="primary"
          size="small"
          ghost
          class="mini-btn mr-8px"
          @click="downloadExcel"
        >
          <template #icon>
            <icon-ic-round-download class="align-sub text-icon" />
          </template>
          <span class="ml-3px">导出</span>
        </AButton>
-->
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="handleQrCode">
          <template #icon>
            <!-- <icon-ic-round-download class="align-sub text-icon" /> -->
            <QrcodeOutlined />
          </template>
          <span class="ml-3px">二维码</span>
        </AButton>
      </template>
    </Table>
    <!-- dryfilm -->
    <PrintQrCode v-model:visible="visible" type="dryfilm"></PrintQrCode>
  </div>
</template>
